<template>
	<view class="charge-content">
		<view class="charge-box">
			<uni-table>
				<uni-tr class="form-table-tit">
					<uni-th style="width: 200rpx;">名称</uni-th>
					<uni-th width="33%">时间(分钟)</uni-th>
					<uni-th width="33%">价格(元)</uni-th>
				</uni-tr>
				<uni-tr class="form-table-con">
					<uni-td>热身运动</uni-td>
					<uni-td>
						<input type="number" v-model="rs_time" placeholder="请输入" />
					</uni-td>
					<uni-td>
						<input type="number" v-model="rs_price" placeholder="请输入" />
					</uni-td>
				</uni-tr>
				<uni-tr class="form-table-con">
					<uni-td>健身运动</uni-td>
					<uni-td>
						<input type="number" v-model="js_time" placeholder="请输入" />
					</uni-td>
					<uni-td>
						<input type="number" v-model="js_price" placeholder="请输入" />
					</uni-td>
				</uni-tr>
				<uni-tr class="form-table-con">
					<uni-td>强身运动</uni-td>
					<uni-td>
						<input type="number" v-model="qs_time" placeholder="请输入" />
					</uni-td>
					<uni-td>
						<input type="number" v-model="qs_price" placeholder="请输入" />
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<button size="mini" @click="submit" class="btn">保存计费</button>
	</view>
</template>

<script>
	import api from '@/api/index.js';

	export default {
		data() {
			return {
				ground_id:null,
				rs_time: '',
				rs_price: '',
				js_time: '',
				js_price: '',
				qs_time: '',
				qs_price: '',
			};
		},
		onLoad(options) {
			if (options && options.id) {
				this.ground_id = options.id
				this.getGroundDetails()
			}
		},

		methods: {
			getGroundDetails() {
				// 获取场景类型列表
				api.getGroundDetails({
					id: this.ground_id
				}).then(res => {
					this.rs_time = res.data.rs_time
					this.rs_price = res.data.rs_price
					this.js_time = res.data.js_time
					this.js_price = res.data.js_price
					this.qs_time = res.data.qs_time
					this.qs_price = res.data.qs_price
				})
			},
			showToast(title) {
				uni.showToast({
					icon: "none",
					title: title
				})
			},
			submit() {
				if (!this.rs_time) {
					return this.showToast('请输入热身运动时间')
				}
				if (!this.rs_price) {
					return this.showToast('请输入热身运动价格')
				}
				if (!this.js_time) {
					return this.showToast('请输入健身运动时间')
				}
				if (!this.js_price) {
					return this.showToast('请输入健身运动价格')
				}
				if (!this.qs_time) {
					return this.showToast('请输入强身运动时间')
				}
				if (!this.qs_price) {
					return this.showToast('请输入强身运动价格')
				}
				api.editGround({
					id: this.ground_id,
					rs_time: this.rs_time,
					rs_price: this.rs_price,
					js_time: this.js_time,
					js_price: this.js_price,
					qs_time: this.qs_time,
					qs_price: this.qs_price,
				}).then(res => {
					this.showToast(res.msg)
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.charge-content {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding-top: 22rpx;

		.charge-box {
			margin: 0 22rpx;
			background: url('/static/images/home/empty-bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 52rpx 42rpx;
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			font-style: normal;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}
	}
</style>